<template>
  <div>
    <top-bar :title="topTitle"></top-bar>
    <div class="plan-wrapper">
      <div class="top-con">
        <a v-if="userInfo.babyPhoto">
          <img :src="userInfo|filterSrc" class="portrait">
        </a>
        <a v-else>
          <img src="../../../static/images/babyBoy.png" class="portrait" v-if="userInfo.sex=='男' || userInfo.sex==0">
          <img src="../../../static/images/babyGirl.png" class="portrait" v-else>
        </a>
        <h4 class="name">{{userInfo.name}}</h4>
        <a class="switch-btn" @click="switchPopup=true">切换</a>
      </div>

      <div>
        <div class="be-vaccinated" v-for="(item,index) in inoculateList" :key="index" @click="inoculateClick(item)">
          <h4>
            <span class="l">待接种</span>
            <div class="unauthorized-box">
              <img src="../../../static/images/record/have-appoint.png" class="unauthorized-pic">
              <span class="unauthorized-text" v-if="item.status==1">已预约</span>
            </div>
          </h4>
          <p class="time">
            {{item.appointtime}}
            <img src="../../../static/images/record/arrow-right.png" class="arrow-right">
          </p>
          <p class="vaccine">{{item.vaccinateName}}</p>
        </div>
      </div>


      <div class="unauthorized-list" >
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <div class="age-con">
              <div class="left">
                <img src="../../../static/images/record/circle.png" class="circle">
              </div>
              <div class="right">
                <span class="age">{{index}}个月</span>
                <!-- <div class="unauthorized-box">
                   <img src="../../../static/images/record/unauthorized.png" class="unauthorized-pic">
                   <span class="unauthorized-text">未接种</span>
                 </div>-->
                <div class="vaccine-box">
                  <div class="vaccine-list" v-for="(group,groupIndex) in item" :key="groupIndex">
                    <div class="left">
                      <div class="label-btn">
                        <!-- 判断是否免费 false免费true自费-->
                        <span class="own-expense" v-if="group.ispay==0">自费</span>
                        <span class="own-expense" style="background: #8CC6E3" v-else>免费</span>

                        <!--canselect 0必打，2替代，1自选-->
                        <span class="alternative" v-if="group.canselect==0">替代</span>
                        <span class="alternative" v-else-if="group.canselect==1">自选</span>
                        <span class="alternative" v-else-if="group.canselect==2">替代</span>
                      </div>
                      <p class="vaccine-name">{{group.name}}</p>
                    </div>
                    <a class="appoint-btn" @click="appoint">预约</a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!--切换宝宝-->
      <div v-transfer-dom>
        <popup v-model="switchPopup" position="bottom" class="switch-popup">
          <div class="header">
            <h4>切换宝宝</h4>
            <img src="../../../static/images/record/close.png" class="close" @click="switchPopup=false">
          </div>
          <div class="con">
            <radio :options="radiobabyList"  v-model="radiobabyValue"  @on-change="radiobabyChange"></radio>
          </div>
        </popup>
      </div>

    </div>
  </div>

</template>

<script>
  import { XButton, TransferDom, Popup ,Radio} from 'vux'
  import TopBar from '@/components/top';
  import url from '../../../config/app.config'

    export default {
        name: "index",
      metaInfo () {
        return {
          title: '接种计划'
        }
      },
        data(){
            return {
              topTitle:'接种计划',
              switchPopup:false,
              radiobabyList:[],
              radiobabyValue:'0',
              userInfo:{},
              userList:[],
              babyId:sessionStorage.getItem('childId'),
              userId:sessionStorage.getItem('userId'),

              list:[],
              inoculateList:[],
            }
        },
      filters:{
        filterSrc(val){
          let p=url.http_url+'/'+val.babyPhoto;
          return p
        }
      },
      mounted(){
        this.userInfo=JSON.parse(sessionStorage.getItem('userInfo'));
        this.userList=JSON.parse(sessionStorage.getItem('children'));
        for(let i in this.userList){
          this.radiobabyList.push({
            key:this.userList[i].id,
            value:this.userList[i].name
          })
        }
        this.radiobabyValue=sessionStorage.getItem('childId');

        this.getData();
      },
      methods:{
        radiobabyChange(val){
          for(let i in this.userList){
            if(this.userList[i].id==val){
              this.userInfo=this.userList[i];
              this.babyId=this.userList[i].id;
              sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo));
              sessionStorage.setItem('childId',this.userInfo.id);
            }
          }
          this.switchPopup=false;
          this.getData();

          this.$api.post('/userHandle/changeBaby',{
            id:this.userId,
            selectBaby:val
          }).then( (res)=> {})
        },
        getData(){
          this.$api.get(`/vaccinationReservation/findChildInoculatePlan/${this.babyId}/${this.userId}`).then( (res)=> {
            if(res.data.result==0){
              this.list=res.data.obj;
            }
          })

          this.$api.get(`/vaccinationReservation/queryOrderInfoByChild/${this.babyId}`).then( (res)=> {
            if(res.data.result==0){
              this.inoculateList=res.data.obj;
            }
          })

        },
        appoint(){
          this.$router.push({path: '/fastappint'})
        },
        inoculateClick(val){
          this.$router.push({path: '/vaccinedetails',query:{vaccinecoding:val.vaccinecoding}})
        }
      },
       components: {
        XButton,
        Popup,
        Radio,
        TopBar
      },
      directives: {
        TransferDom
      },
    }
</script>

<style lang="scss">
    .plan-wrapper{
      padding:10px 15px 0;
      background: #fff;
      height: 100%;
      .top-con{
        text-align: center;
        position: relative;
        .switch-btn{
          position: absolute;
          width:44px;
          height:22px;
          line-height: 22px;
          border:1px solid rgba(245,99,99,1);
          border-radius:10px;
          font-size:12px;
          font-family:PingFang-SC-Regular;
          font-weight:bold;
          color:rgba(245,99,99,1);
          top:10px;
          right: 15px;
        }
        .portrait{
          width:70px;
          height:70px;
          border-radius:50%;
          margin-bottom: 10px;
        }
        .name{
          font-size:18px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(38,38,38,1);
        }
      }
      .be-vaccinated{
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
        border-radius:10px;
        margin-top:15px;
        padding:15px;
        h4{
          margin-bottom: 14px;
          .l{
            display: inline-block;
            height: 14px;
            line-height: 14px;
            border-left: 4px solid #F56363;
            padding-left:4px;
            font-size:15px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(38,38,38,1);
          }
          .unauthorized-box{
            position: relative;
            display: inline-block;
            vertical-align: middle;
            .unauthorized-pic{
              width:58px;
              height: 22px;
            }
            .unauthorized-text{
              position: absolute;
              left:10px;
              top:4px;
              font-size:12px;
              font-weight:400;
              color:rgba(255,255,255,1);
            }
          }
        }
        .time{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
          margin-bottom: 13px;
          .arrow-right{
            width: 14px;
            height: 15px;
            float: right;
          }
        }
        .vaccine{
          font-size:15px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(245,99,99,1);
        }
      }
      .unauthorized-list{
        padding:20px 15px 0 10px;
        margin-bottom: 70px;
        ul{
          position: relative;
          &:before{
            content: '';
            position: absolute;
            left: 8px;
            top: 14px;
            z-index: 0;
            width: 1px;
            height: 100%;
            background-color: #EAEAEA;
          }
          li{
            .age-con{
              margin:12px 0 0px;
              display: flex;
              .left{
                flex:0 0 20px;
                position: relative;
                .circle{
                  width:17px;
                  height: 17px;
                  position: absolute;
                  z-index: 20;
                  background: #fff;
                }
              }
              .right{
                flex: 1;
                .age{
                  font-size:15px;
                  font-weight:400;
                  color:rgba(38,38,38,1);
                }
              }
              .unauthorized-box{
                position: relative;
                display: inline-block;
                vertical-align: middle;
                .unauthorized-pic{
                  width:58px;
                  height: 22px;
                }
                .unauthorized-text{
                  position: absolute;
                  left:10px;
                  top:4px;
                  font-size:12px;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                }
              }
            }
            .vaccine-box{
              margin-top:12px;
              .vaccine-list{
                background:rgba(247,245,245,1);
                border-radius:10px;
                margin-bottom: 10px;
                padding:15px;
                display: flex;
                .left{
                  flex:1;
                  .label-btn{
                    span{
                      width:39px;
                      height:18px;
                      line-height:18px;
                      display: inline-block;
                      font-size:12px;
                      font-family:PingFang-SC-Regular;
                      font-weight:400;
                      color:rgba(255,255,255,1);
                      text-align: center;
                    }
                    .own-expense{
                      background:rgba(245,180,110,1);
                    }
                    .alternative{
                      background:rgba(123,203,84,1);
                    }
                  }
                  .vaccine-name{
                    font-size:15px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(38,38,38,1);
                    margin-top:10px;
                    line-height: 25px;
                  }
                }
                .appoint-btn{
                  flex:0 0 74px;
                  width:74px;
                  height:30px;
                  line-height: 30px;
                  background:rgba(245,99,99,1);
                  border-radius:10px;
                  text-align: center;
                  font-size:14px;
                  font-family:PingFang-SC-Regular;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                  margin-top: 6px;
                }
              }
            }
          }
        }
        .record-no-data{
          text-align: center;
          padding-top:70px;
          img{
            width:187px;
            height: 125px;
          }
          p{
            height:25px;
            font-size:16px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:25px;
          }
        }
      }
    }
    .switch-popup{
      background:#fff!important;
      .header{
        padding:23px 0 15px;
        border-bottom: 1px solid #EDEDED;
        position: relative;
        h4{
          text-align: center;
          font-size:18px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
        }
        .close{
          width:18px;
          height: 18px;
          position: absolute;
          right:15px;
          top:20px;
        }
      }
      .con{
        .switch-popup-btn{
          background:#F56363;
          height:50px;
          line-height: 50px;
          border-radius: 0;
          font-size:14px;
          font-weight:400;
          color:rgba(255,255,255,1);
          &:after{
            border-radius: 0;
          }
        }
        .weui-cells_radio{
          padding:20px 15px 20px 30px;
          .weui-cell{
            display: flex;
            height: 40px;
            line-height: 40px;
            justify-content:space-between;
            .weui-cell__bd{
              .vux-radio-label{
                font-size:15px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(38,38,38,1);
              }
            }
            .weui-cell__ft{

            }
          }
        }
        .weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
          color:#F56363;
          content: '\EA06';
        }
      }
    }
</style>
